<template>
  <div class="project">
    <div class="year">
      <span>年份：</span>
      <div v-for="(item, index) in yearList" :key="index">
        <div
          class="year-item"
          :class="{
            active: currentYear === index
            // disabled:
            //   isView && yearList[index] > todayYear
          }"
          @click="clickYear(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="tip">
      <span class="tip-label">项目名称：</span>
      <span class="tip-val">{{ projectName }}</span>
      <span class="tip-label">本年度计划投资：</span>
      <span class="tip-val"
        >{{
          yearPlanInvestment[yearList[currentYear]] || 0
        }}
        万元</span
      >
    </div>
    <el-form
      :model="basicForm"
      label-position="top"
      :rules="basicRules"
      ref="basicFormRef"
    >
      <div
        v-for="(item, index) of basicForm.planInfo"
        :key="index"
        v-show="
          parseInt(yearList[currentYear]) ===
          parseInt(item.year)
        "
      >
        <!-- 月度投资计划 -->
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            月度投资计划
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1月投资"
                  :prop="'planInfo.' + index + '.janInvest'"
                >
                  <el-input
                    v-model="item.janInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-2月累计投资"
                  :prop="'planInfo.' + index + '.febInvest'"
                >
                  <el-input
                    v-model="item.febInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-3月累计投资"
                  :prop="'planInfo.' + index + '.marInvest'"
                >
                  <el-input
                    v-model="item.marInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-4月累计投资"
                  :prop="'planInfo.' + index + '.aprInvest'"
                >
                  <el-input
                    v-model="item.aprInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-5月累计投资"
                  :prop="'planInfo.' + index + '.mayInvest'"
                >
                  <el-input
                    v-model="item.mayInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-6月累计投资"
                  :prop="'planInfo.' + index + '.junInvest'"
                >
                  <el-input
                    v-model="item.junInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-7月累计投资"
                  :prop="'planInfo.' + index + '.julInvest'"
                >
                  <el-input
                    v-model="item.julInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-8月累计投资"
                  :prop="'planInfo.' + index + '.augInvest'"
                >
                  <el-input
                    v-model="item.augInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-9月累计投资"
                  :prop="'planInfo.' + index + '.sepInvest'"
                >
                  <el-input
                    v-model="item.sepInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-10月累计投资"
                  :prop="'planInfo.' + index + '.octInvest'"
                >
                  <el-input
                    v-model="item.octInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-11月累计投资"
                  :prop="'planInfo.' + index + '.novInvest'"
                >
                  <el-input
                    v-model="item.novInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1-12月累计投资"
                  :prop="'planInfo.' + index + '.decInvest'"
                >
                  <el-input
                    v-model="item.decInvest"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 计划形象进度 -->
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            计划形象进度
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1月"
                  :prop="
                    'planInfo.' + index + '.janProcess'
                  "
                >
                  <el-input
                    v-model="item.janProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="2月"
                  :prop="
                    'planInfo.' + index + '.febProcess'
                  "
                >
                  <el-input
                    v-model="item.febProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="3月"
                  :prop="
                    'planInfo.' + index + '.marProcess'
                  "
                >
                  <el-input
                    v-model="item.marProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="1季度"
                  :prop="
                    'planInfo.' + index + '.firstQuarter'
                  "
                >
                  <el-input
                    v-model="item.firstQuarter"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="4月"
                  :prop="
                    'planInfo.' + index + '.aprProcess'
                  "
                >
                  <el-input
                    v-model="item.aprProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="5月"
                  :prop="
                    'planInfo.' + index + '.mayProcess'
                  "
                >
                  <el-input
                    v-model="item.mayProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="6月"
                  :prop="
                    'planInfo.' + index + '.junProcess'
                  "
                >
                  <el-input
                    v-model="item.junProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="2季度"
                  :prop="
                    'planInfo.' + index + '.secondQuarter'
                  "
                >
                  <el-input
                    v-model="item.secondQuarter"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="7月"
                  :prop="
                    'planInfo.' + index + '.julProcess'
                  "
                >
                  <el-input
                    v-model="item.julProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="8月"
                  :prop="
                    'planInfo.' + index + '.augProcess'
                  "
                >
                  <el-input
                    v-model="item.augProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="9月"
                  :prop="
                    'planInfo.' + index + '.sepProcess'
                  "
                >
                  <el-input
                    v-model="item.sepProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="3季度"
                  :prop="
                    'planInfo.' + index + '.thirdQuarter'
                  "
                >
                  <el-input
                    v-model="item.thirdQuarter"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="10月"
                  :prop="
                    'planInfo.' + index + '.octProcess'
                  "
                >
                  <el-input
                    v-model="item.octProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="11月"
                  :prop="
                    'planInfo.' + index + '.novProcess'
                  "
                >
                  <el-input
                    v-model="item.novProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="12月"
                  :prop="
                    'planInfo.' + index + '.decProcess'
                  "
                >
                  <el-input
                    v-model="item.decProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="4季度"
                  :prop="
                    'planInfo.' + index + '.fourthQuarter'
                  "
                >
                  <el-input
                    v-model="item.fourthQuarter"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 前期工作推进情况 -->
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            前期工作推进情况
          </div>
          <div class="project-part-content">
            <div
              v-for="(item, indexs) of item.workInfos"
              :key="indexs"
            >
              <div class="project-part-content-title">
                {{ item.node }}
              </div>
              <el-row :gutter="24">
                <!-- 节点：开工 -->
                <template v-if="item.node === '开工'">
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="是否开工"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.startWork'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.startWork"
                        clearable
                        :disabled="isDetail"
                        @change="
                          handleChangeStartWork(
                            index,
                            indexs
                          )
                        "
                      >
                        <el-option
                          v-for="item in ynOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    v-if="item.startWork === '是'"
                  >
                    <el-form-item
                      label="实际开工时间"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.realTime'
                      "
                    >
                      <el-date-picker
                        v-model="item.realTime"
                        type="date"
                        :disabled="isDetail"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    v-else
                  >
                    <el-form-item
                      label="计划开工时间"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.startTime'
                      "
                    >
                      <el-date-picker
                        v-model="item.startTime"
                        type="date"
                        :disabled="isDetail"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="是否存在问题"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.problem'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.problem"
                        :disabled="isDetail"
                        @change="
                          (value) =>
                            handleChangeProblem(
                              value,
                              index,
                              indexs
                            )
                        "
                      >
                        <el-option
                          v-for="item in ynOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </template>
                <!-- 节点：非“开工”节点 -->
                <template v-else>
                  <!-- 所有情况都有：办理情况 -->
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="办理情况"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.status'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.status"
                        :disabled="isDetail"
                        @change="
                          (value) =>
                            handleChangeStatus(
                              value,
                              index,
                              indexs
                            )
                        "
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 办理情况：未开始办理、办理中 时显示 -->
                  <template
                    v-if="
                      basicForm.planInfo[index].workInfos[
                        indexs
                      ].status === 'wksbl' ||
                      basicForm.planInfo[index].workInfos[
                        indexs
                      ].status === 'blz'
                    "
                  >
                    <el-col
                      :sm="24"
                      :md="12"
                      :lg="8"
                      :xl="6"
                    >
                      <el-form-item
                        label="计划开始时间"
                        :prop="
                          'planInfo.' +
                          index +
                          '.workInfos.' +
                          indexs +
                          '.startTime'
                        "
                      >
                        <el-date-picker
                          v-model="item.startTime"
                          type="date"
                          :disabled="isDetail"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="12"
                      :lg="8"
                      :xl="6"
                    >
                      <el-form-item
                        label="预计完成时间"
                        :prop="
                          'planInfo.' +
                          index +
                          '.workInfos.' +
                          indexs +
                          '.endTime'
                        "
                      >
                        <el-date-picker
                          v-model="item.endTime"
                          type="date"
                          :disabled="isDetail"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="12"
                      :lg="8"
                      :xl="6"
                    >
                      <el-form-item
                        label="是否存在问题"
                        :prop="
                          'planInfo.' +
                          index +
                          '.workInfos.' +
                          indexs +
                          '.problem'
                        "
                      >
                        <el-select
                          placeholder=""
                          v-model="item.problem"
                          :disabled="isDetail"
                          @change="
                            (value) =>
                              handleChangeProblem(
                                value,
                                index,
                                indexs
                              )
                          "
                        >
                          <el-option
                            v-for="item in ynOptions"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </template>
                  <!-- 办理情况：已办结 时显示-->
                  <template
                    v-if="
                      basicForm.planInfo[index].workInfos[
                        indexs
                      ].status === 'ybj'
                    "
                  >
                    <el-col
                      :sm="24"
                      :md="12"
                      :lg="8"
                      :xl="6"
                    >
                      <el-form-item
                        label="实际完成时间"
                        :prop="
                          'planInfo.' +
                          index +
                          '.workInfos.' +
                          indexs +
                          '.completeTime'
                        "
                      >
                        <el-date-picker
                          v-model="item.completeTime"
                          type="date"
                          :disabled="isDetail"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </template>
                </template>
                <!-- 是否存在问题：是 时显示-->
                <template
                  v-if="
                    basicForm.planInfo[index].workInfos[
                      indexs
                    ].problem === '是'
                  "
                >
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="问题描述"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.description'
                      "
                    >
                      <el-input
                        type="textarea"
                        v-model="item.description"
                        :disabled="isDetail"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="解决措施"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.completeWay'
                      "
                    >
                      <el-input
                        type="textarea"
                        v-model="item.completeWay"
                        :disabled="isDetail"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="预计解决时间"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.planTime'
                      "
                    >
                      <el-date-picker
                        v-model="item.planTime"
                        type="date"
                        :disabled="isDetail"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="是否需要协调处理"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.needHandle'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.needHandle"
                        clearable
                        :disabled="isDetail"
                      >
                        <el-option
                          v-for="item in ynOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getDictOptions } from '@/utils/dict'

export default {
  props: {
    yearList: Array,
    isDetail: Boolean,
    detailInfo: Array,
    projectName: String,
    yearPlanInvestment: Object
  },
  data() {
    return {
      currentYear: 0,
      basicForm: {
        planInfo: []
      },
      basicRules: {
        projectName: [
          {
            required: true,
            message: '请输入事项名称',
            trigger: 'blur'
          }
        ],
        useArea: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: '请输入最多两位小数的正数',
            trigger: 'blur'
          }
        ],
        day: [
          {
            pattern: /^[+]{0,1}(\d+)$/,
            message: '请输入正整数',
            trigger: 'blur'
          }
        ]
      },
      statusOptions: [],
      ynOptions: [
        {
          dictValue: '是',
          dictText: '是'
        },
        {
          dictValue: '否',
          dictText: '否'
        }
      ]
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  watch: {
    yearList(val) {
      if (val.length) {
        if (this.detailInfo.length === 0) {
          this.basicForm.planInfo = val.map((item) => {
            return {
              year: item,
              janInvest: '',
              febInvest: '',
              marInvest: '',
              aprInvest: '',
              mayInvest: '',
              junInvest: '',
              julInvest: '',
              augInvest: '',
              sepInvest: '',
              octInvest: '',
              novInvest: '',
              decInvest: '',
              janProcess: '',
              febProcess: '',
              marProcess: '',
              firstQuarter: '',
              aprProcess: '',
              mayProcess: '',
              junProcess: '',
              secondQuarter: '',
              julProcess: '',
              augProcess: '',
              sepProcess: '',
              thirdQuarter: '',
              octProcess: '',
              novProcess: '',
              decProcess: '',
              fourthQuarter: '',
              workInfos: [
                {
                  node: '开工',
                  status: '',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 1
                },
                {
                  node: '可研评审',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 2
                },
                {
                  node: '立项',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 3
                },
                {
                  node: '土地保障批复',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 4
                },
                {
                  node: '拆迁',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 5
                },
                {
                  node: '签订出让合同',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 6
                },
                {
                  node: '方案设计（规划评审）',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 7
                },
                {
                  node: '施工图设计即审查',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 8
                },
                {
                  node: '清单编制及评审',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 9
                },
                {
                  node: '取得控制性批复并发布招标公告',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 10
                },
                {
                  node: '评标结果公示',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 11
                },
                {
                  node: '施工进场准备',
                  status: 'wksbl',
                  startWork: '',
                  realTime: '',
                  startTime: '',
                  endTime: '',
                  problem: '否',
                  completeTime: '',
                  description: '',
                  completeWay: '',
                  planTime: '',
                  needHandle: '',
                  orderIndex: 12
                }
              ]
            }
          })
        } else {
          const oldInfo = JSON.parse(
            JSON.stringify(this.basicForm.planInfo)
          )
          this.basicForm.planInfo = []
          val.forEach((item) => {
            const oldVal = oldInfo.find(
              (info) => info.year === parseInt(item)
            )
            const oldVal1 = this.detailInfo.find(
              (info) => info.year === parseInt(item)
            )
            if (oldVal) {
              this.basicForm.planInfo.push(oldVal)
            } else if (oldVal1) {
              this.basicForm.planInfo.push(oldVal1)
            } else {
              this.basicForm.planInfo.push({
                year: item,
                janInvest: '',
                febInvest: '',
                marInvest: '',
                aprInvest: '',
                mayInvest: '',
                junInvest: '',
                julInvest: '',
                augInvest: '',
                sepInvest: '',
                octInvest: '',
                novInvest: '',
                decInvest: '',
                janProcess: '',
                febProcess: '',
                marProcess: '',
                firstQuarter: '',
                aprProcess: '',
                mayProcess: '',
                junProcess: '',
                secondQuarter: '',
                julProcess: '',
                augProcess: '',
                sepProcess: '',
                thirdQuarter: '',
                octProcess: '',
                novProcess: '',
                decProcess: '',
                fourthQuarter: '',
                workInfos: [
                  {
                    node: '开工',
                    status: '',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 1
                  },
                  {
                    node: '可研评审',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 2
                  },
                  {
                    node: '立项',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 3
                  },
                  {
                    node: '土地保障批复',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 4
                  },
                  {
                    node: '拆迁',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 5
                  },
                  {
                    node: '签订出让合同',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 6
                  },
                  {
                    node: '方案设计（规划评审）',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 7
                  },
                  {
                    node: '施工图设计即审查',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 8
                  },
                  {
                    node: '清单编制及评审',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 9
                  },
                  {
                    node: '取得控制性批复并发布招标公告',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 10
                  },
                  {
                    node: '评标结果公示',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 11
                  },
                  {
                    node: '施工进场准备',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 12
                  }
                ]
              })
            }
          })
        }
      }
    },
    detailInfo(val) {
      // if (val.length > 0) {
      this.basicForm.planInfo = Object.assign(
        [],
        this.detailInfo
      )
      // }
    }
  },
  mounted() {
    this.initOptions()
  },
  methods: {
    async initOptions() {
      const data = await getDictOptions('zhcy_blqk')
      this.statusOptions = data
    },
    clickYear(index) {
      // if (
      //   this.isView &&
      //   this.yearList[index] > this.todayYear
      // ) {
      //   this.$message.warning('不可查看未到年份')
      //   return
      // }
      this.currentYear = index
    },
    // 修改办理情况
    handleChangeStatus(value, index, indexs) {
      // 办理情况：未开始办理、办理中 => 重置：实际完成时间
      if (value === 'wksbl' || value === 'blz') {
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].completeTime = ''
      } else {
        // 办理情况：已办结、无需办理 => 重置：计划开始时间、预计完成时间、是否存在问题、问题描述、解决措施、预计完成时间、是否需要协调处理
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].startTime = ''
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].endTime = ''
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].problem = '否'
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].description = ''
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].completeWay = ''
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].planTime = ''
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].needHandle = ''
        // 办理情况：无需办理 => 重置：实际完成时间
        if (value === 'wxbl') {
          this.basicForm.planInfo[index].workInfos[
            indexs
          ].completeTime = ''
        }
      }
    },
    // 修改是否存在问题
    handleChangeProblem(value, index, indexs) {
      if (value === '否') {
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].description = ''
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].completeWay = ''
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].planTime = ''
        this.basicForm.planInfo[index].workInfos[
          indexs
        ].needHandle = ''
      }
    },
    // 修改是否开工
    handleChangeStartWork(index, indexs) {
      this.basicForm.planInfo[index].workInfos[
        indexs
      ].startTime = ''
      this.basicForm.planInfo[index].workInfos[
        indexs
      ].realTime = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.project {
  flex: 1 1 auto;
  overflow: auto;

  &-part {
    margin-top: 10px;

    &-title {
      color: #4c565c;
      line-height: 18px;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 24px;
      position: relative;
      box-sizing: border-box;
      padding: 0 0 0 11px;
      line-height: 16px;

      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background: linear-gradient(
          180deg,
          #40ebff,
          #bcf8ff
        );
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    &-title1 {
      margin-left: 10px;
    }

    &-content {
      padding-left: 10px;
      &-title {
        font-size: 16px;
        font-weight: 500;
        color: #4c565c;
        line-height: 16px;
        position: relative;
        padding-left: 15px;
        margin-bottom: 16px;
        &::before {
          position: absolute;
          content: ' ';
          width: 7px;
          height: 7px;
          background: #87ebf7;
          border-radius: 50%;
          top: 5px;
          left: 0;
        }
      }
    }
  }
}

::v-deep {
  .el-form-item__label {
    line-height: 14px !important;
  }

  .el-form-item__content {
    line-height: auto !important;
  }

  .el-input-group__append {
    height: 24px !important;
    border-left: 1px solid #dcdfe6 !important;
    text-align: center !important;
    line-height: 24px !important;
  }

  .el-input__inner {
    // background: #f6f9fc !important;
    color: #4c565c !important;
    height: 32px !important;
    width: 320px !important;
    // margin-left: 10px;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 40px !important;
      margin-top: -25px !important;
    }

    .el-range-separator {
      width: 20px !important;
      margin-top: -5px !important;
    }

    .el-range-input {
      // background: #f6f9fc !important;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #e8eff7 !important;
  }

  .el-button.is-disabled {
    background: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }

  .el-input-group__append {
    position: absolute;
    height: 20px;
    line-height: 20px;
    width: 80px;
    text-align: right;
    top: 4px;
    left: 235px;
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 30px;
    }

    .is-reverse {
      line-height: 15px !important;
    }
  }

  .el-select {
    width: 320px !important;

    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      // top: 4px !important;
      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 15px;
      }

      .is-reverse {
        line-height: 35px !important;
      }
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-textarea__inner {
    // background: #f6f9fc !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    width: 320px !important;
  }

  .el-breadcrumb__inner {
    color: #606266 !important;
    font-weight: 400 !important;
  }

  .el-date-editor.el-input {
    width: auto !important;
  }
}

.year,
.month {
  display: flex;
  margin: 0 0 20px 10px;
  font-size: 14px;
  line-height: 28px;

  &-item {
    width: 66px;
    height: 28px;
    background: #f6f9fc;
    border: 1px solid #ebf1f8;
    margin-right: 15px;
    text-align: center;
    cursor: pointer;
    line-height: 28px;
    font-size: 14px;

    &.active {
      color: #00baff;
      border: 1px solid #00baff;
    }
    &.disabled {
      background: #e8eff7;
      color: #000000ba;
    }
  }
}

.tip {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px;
  background-color: #f1f1f1;
  margin-bottom: 10px;
  &-label {
    color: #000000;
    font-size: 14px;
  }
  &-val {
    color: #4c565c;
    font-size: 14px;
    margin-right: 20px;
  }
}
</style>
